<template>
  <div class="login">
    <!-- 导航栏 -->
    <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
    <!-- form表单 -->
    <van-form>
      <van-field
        v-model="phone"
        name="phone"
        placeholder="请填写手机号"
        left-icon="icon iconfont icon-shouji1"
        :rules="[{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
      />
      <!-- 以字母开头，长度在6~10之间，只能包含字母、数字和下划线 -->
      <van-field
        v-model="pwd"
        name="pwd"
        type="password"
        placeholder="请设置6-10位登录密码"
        left-icon="icon iconfont icon-mima"
        :rules="[{ pattern: /^[a-zA-Z]\w{5,9}$/, message: '请输入正确的密码' }]"
      />

      <van-checkbox
        v-model="checked"
        checked-color="rgb(222, 196, 155)"
        icon-size="14px"
      >
        我已阅读并同意<span class="xieyi">《用户隐私协议》</span>
      </van-checkbox>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          :disabled="!checked"
          @click="onLogin"
          >立即登录</van-button
        >
      </div>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="onToRegister"
          >没有账号，立即注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      phone: "",
      email: "",
      pwd: "",
      checked: false,
    };
  },
  methods: {
    onClickLeft() {
      // 跳转到首页
      this.$router.push("/");
    },
    onLogin() {
      this.axios
        .post("/v1/users/login", `phone=${this.phone}&upwd=${this.pwd}`)
        .then((result) => {
          console.log(result.data);
          if (result.data.code === 200) {
            Toast({
              message: "登录成功",
              position: "bottom",
              duration: 1000,
            });
            setTimeout(() => {
              this.$router.push("/");
            }, 1200);
            // 修改vuex中的登录状态
            this.$store.commit("loginok", this.phone);
            // 将islogin/phone/uid存入sessionStorage
            sessionStorage.setItem("islogin", true);
            sessionStorage.setItem("phone", this.phone);
            sessionStorage.setItem("uid", result.data.data[0].uid);
          } else {
            Toast({
              message: "登录失败",
              position: "bottom",
              duration: 1000,
            });
          }
        });
    },
    onToRegister() {
      this.$router.push("/register");
    },
  },
};
</script>

<style>
.login .van-nav-bar {
  background-color: rgb(222, 196, 155);
}
.login .van-nav-bar .van-icon {
  font-size: 24px;
  color: #fff;
}
.login .van-nav-bar__title {
  color: #fff;
  font-size: 20px;
}
.login .van-cell {
  font-size: 13px;
  width: 90%;
  margin-left: 20px;
  margin-top: 20px;
}
.login .van-field__control {
  margin-left: 10px;
}
.login .van-checkbox {
  font-size: 12px;
  margin-top: 20px;
  margin-left: 36px;
}
.login .van-checkbox .xieyi {
  color: rgb(222, 196, 155);
}
.login .van-button {
  background-color: rgb(222, 196, 155);
  border: 1px solid rgb(222, 196, 155);
  margin-top: 20px;
}
.login .van-form > div:nth-child(4) button {
  background-color: #fff;
  border: 1px solid rgb(222, 196, 155);
  color: rgb(222, 196, 155);
  font-size: 16px;
}
</style>